<template>
  <div class="zx-upfile-img">
    <div class="zx-upfileimg-box">
      <div class="zx-upfileimg-out">
        <div class="zx-upfileimg-border">
          <div class="pic">
            <img :src="img">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'zxUpfileImg',
  model: {
    prop: 'imgsrc',
    event: 'change'
  },
  props: {
    img: {
      type: String,
      default: ''
    }
  },
  data () {
    return { }
  },
  methods: {
  },
  mounted: function () { },
  watch: {
    'img': function (val) {
      // console.log(val)
    }
  }
}
</script>

<style lang="less">
.zx-upfile-img { width:100%;}
.zx-upfileimg-box { padding:0.3rem 0.55rem; height: 3.4rem; background:#fff;}
.zx-upfileimg-out { background: #fff; height: 100%; padding: 0.2rem;}
.zx-upfileimg-border { border:1px solid rgb(230, 230, 230); height: 100%; padding: 0.2rem;}
.zx-upfileimg-border>.pic { background: rgba(230,230,230,0.6); width: 100%; height: 100%; text-align: center; box-sizing: border-box;}
.zx-upfileimg-border>.pic:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; width: 0;}
.zx-upfileimg-border>.pic img { max-width: 100%; max-height: 100%; vertical-align: middle;}
</style>
